<template>
  <div class="process-canvas" ref="canvasRef">
    <div class="canvas-container" ref="container"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from "vue";
import { Graph, Shape } from "@antv/x6";
import { Dnd } from "@antv/x6-plugin-dnd";
import { Export } from '@antv/x6-plugin-export'

// 组件属性定义
const props = defineProps({
  currentNode: {
    type: Object,
    default: () => ({}),
  },
});

// 定义向父组件发射的事件
const emit = defineEmits(['nodeSelected']);

/**
 * 画布相关的响应式变量
 */
const container = ref(null); // 画布容器DOM引用
const graph = ref(null); // X6图形实例

/**
 * 初始化X6画布
 * 配置画布的基本属性、网格、缩放、平移、连接线等功能
 */
const initGraph = () => {
  if (!container.value) return;
  
  // 创建X6图形实例
  graph.value = new Graph({
    container: container.value,
    width: '100%',
    height: 600,
    grid: true,
    background: {
      color: "#F2F7FA", // 画布背景色
    },
    // 网格配置
    grid: {
      visible: true,
      type: "doubleMesh", // 双重网格
      args: [
        {
          color: "#eee", // 主网格线颜色
          thickness: 1, // 主网格线宽度
        },
        {
          color: "#ddd", // 次网格线颜色
          thickness: 1, // 次网格线宽度
          factor: 4, // 主次网格线间隔
        },
      ],
    },
    // 缩放与平移配置
    mousewheel: true, // 使用滚轮控制缩放
    panning: {
      enabled: true,
      modifiers: [], // 触发键盘事件进行平移：'alt' | 'ctrl' | 'meta' | 'shift'
      eventTypes: ["leftMouseDown"], // 触发鼠标事件进行平移：'leftMouseDown' | 'rightMouseDown' | 'mouseWheel'
    },
    // 连接线配置
    connecting: {
      router:{
        name: 'manhattan', // 曼哈顿路由算法，连接线呈直角
      }, 
      connector: {
        name: 'rounded', // 圆角连接线
        args: {
          radius: 8, // 圆角半径
        },
      },
      anchor: 'center', // 连接点位置
      connectionPoint: 'boundary', // 连接点类型
      allowBlank: false, // 不允许连接到空白区域
      allowLoop: false, // 不允许自环
      allowNode: false, // 不允许连接到节点（只允许连接到连接桩）
      allowEdge: false, // 不允许连接到边
      highlight: true, // 拖动连接线时高亮显示可用的连接桩
      snap: true, // 拖动连接线时自动吸附到节点或连接桩
      
      /**
       * 自定义新建边的样式
       * @returns {Shape.Edge} 返回配置好的边实例
       */
     createEdge(){
        // 根据连接的节点类型设置不同的边样式
        return new Shape.Edge({
          attrs: {
            line: {
              stroke: '#1890ff', // 默认蓝色
              strokeWidth: 1.5,
              targetMarker: {
                name: 'classic',
                size: 8,
              },
            },
          },
          router: {
            name: 'manhattan',
          },
          zIndex: 0,
        })
     },
     
     /**
      * 验证连接是否有效
      * @param {Object} params 连接参数
      * @param {Object} params.sourceView 源节点视图
      * @param {Object} params.targetView 目标节点视图
      * @param {Object} params.sourceMagnet 源连接桩
      * @param {Object} params.targetMagnet 目标连接桩
      * @returns {boolean} 连接是否有效
      */
      validateConnection({ sourceView, targetView, sourceMagnet, targetMagnet }) {
        // 检查连接桩是否存在
        if (!sourceMagnet || !targetMagnet) {
          return false
        }
        // 不允许连接到自己
        if (sourceView === targetView) {
          return false
        }
        
        // 获取源节点和目标节点的类型
        const sourceNodeType = sourceView.cell.getData()?.type;
        const targetNodeType = targetView.cell.getData()?.type;
        
        // 开始节点只能作为源节点，不能作为目标节点
        if (targetNodeType === 'start') {
          return false;
        }
        
        // 结束节点只能作为目标节点，不能作为源节点
        if (sourceNodeType === 'end') {
          return false;
        }
        
        return true
      },
    },
  });

  // 添加导出插件
  graph.value.use(new Export())
  
  /**
   * 监听节点点击事件
   * 当节点被点击时，触发节点选中事件
   */
  graph.value.on("node:click", ({node}) => {
    console.log("节点被点击", node);
    // 触发节点选中事件，通知父组件
    emit('nodeSelected', node);
  });
  
  /**
   * 监听节点右键菜单事件
   * 显示删除节点的上下文菜单
   */
  graph.value.on('node:contextmenu', ({ node, e }) => {
    e.preventDefault(); // 阻止默认右键菜单
    
    // 创建右键菜单DOM元素
    const contextMenu = document.createElement('div');
    contextMenu.className = 'context-menu';
    contextMenu.innerHTML = `
      <div class="menu-item" data-action="delete">
        <span>删除节点</span>
      </div>
    `;
    
    // 设置菜单位置（跟随鼠标位置）
    contextMenu.style.position = 'fixed';
    contextMenu.style.left = e.clientX + 'px';
    contextMenu.style.top = e.clientY + 'px';
    contextMenu.style.zIndex = '9999';
    
    // 将菜单添加到页面
    document.body.appendChild(contextMenu);
    
    // 绑定菜单项点击事件
    const deleteItem = contextMenu.querySelector('[data-action="delete"]');
    deleteItem.addEventListener('click', () => {
      // 删除节点
      graph.value.removeNode(node);
      console.log('节点已删除:', node.id);
      
      // 如果删除的是当前选中的节点，清空右侧配置
      emit('nodeSelected', null);
      
      // 安全移除菜单DOM元素
      if (document.body.contains(contextMenu)) {
        document.body.removeChild(contextMenu);
      }
    });
    
    /**
     * 点击其他地方关闭菜单的处理函数
     * @param {Event} event 点击事件
     */
    const closeMenu = (event) => {
      if (!contextMenu.contains(event.target)) {
        // 安全移除菜单DOM元素
        if (document.body.contains(contextMenu)) {
          document.body.removeChild(contextMenu);
        }
        // 移除全局点击事件监听器
        document.removeEventListener('click', closeMenu);
      }
    };
    
    // 延迟添加点击事件，避免立即触发
    setTimeout(() => {
      document.addEventListener('click', closeMenu);
    }, 100);
  });
  
  /**
   * 监听连接线创建事件
   * 实现节点连接数量限制逻辑
   */
  graph.value.on('edge:connected', ({ edge, isNew }) => {
    if (isNew) {
      console.log('新连接线已创建', edge);
      
      // 获取源节点和目标节点
      const sourceNode = edge.getSourceNode();
      const targetNode = edge.getTargetNode();
      
      if (sourceNode && targetNode) {
        const sourceType = sourceNode.getData()?.type;
        const targetType = targetNode.getData()?.type;
        
        // 为开始节点和结束节点实现单连接限制
        if (sourceType === 'start' || sourceType === 'end') {
          // 获取源节点的所有连接线
          const sourceEdges = graph.value.getConnectedEdges(sourceNode);
          // 移除除当前连接线外的其他连接线
          sourceEdges.forEach(existingEdge => {
            if (existingEdge.id !== edge.id && existingEdge.getSourceNode() === sourceNode) {
              graph.value.removeEdge(existingEdge);
            }
          });
        }
        
        if (targetType === 'start' || targetType === 'end') {
          // 获取目标节点的所有连接线
          const targetEdges = graph.value.getConnectedEdges(targetNode);
          // 移除除当前连接线外的其他连接线
          targetEdges.forEach(existingEdge => {
            if (existingEdge.id !== edge.id && existingEdge.getTargetNode() === targetNode) {
              graph.value.removeEdge(existingEdge);
            }
          });
        }
        
        // 为普通工序节点实现最多两个连接的限制
        if (sourceType !== 'start' && sourceType !== 'end') {
          // 获取源节点的所有出边
          const sourceEdges = graph.value.getConnectedEdges(sourceNode);
          const sourceOutgoingEdges = sourceEdges.filter(e => e.getSourceNode() === sourceNode);
          
          // 如果超过2个连接，移除最旧的连接
          if (sourceOutgoingEdges.length > 2) {
            const edgesToRemove = sourceOutgoingEdges.slice(0, sourceOutgoingEdges.length - 2);
            edgesToRemove.forEach(oldEdge => {
              if (oldEdge.id !== edge.id) {
                graph.value.removeEdge(oldEdge);
              }
            });
          }
        }
        
        if (targetType !== 'start' && targetType !== 'end') {
          // 获取目标节点的所有入边
          const targetEdges = graph.value.getConnectedEdges(targetNode);
          const targetIncomingEdges = targetEdges.filter(e => e.getTargetNode() === targetNode);
          
          // 如果超过2个连接，移除最旧的连接
          if (targetIncomingEdges.length > 2) {
            const edgesToRemove = targetIncomingEdges.slice(0, targetIncomingEdges.length - 2);
            edgesToRemove.forEach(oldEdge => {
              if (oldEdge.id !== edge.id) {
                graph.value.removeEdge(oldEdge);
              }
            });
          }
        }
      }
    }
  });
  
  /**
   * 监听连接线移除事件
   */
  graph.value.on('edge:removed', ({ edge }) => {
    console.log('连接线被移除', edge);
  });
  
  // 注释掉的鼠标悬停事件，保持连接点始终可见
  // graph.value.on('node:mouseenter', ({ node }) => {
  //   // 显示所有连接点
  //   node.attr('circle', { style: { visibility: 'visible' } });
  // });

  // graph.value.on('node:mouseleave', ({ node }) => {
  //   // 隐藏所有连接点
  //   node.attr('circle', { style: { visibility: 'hidden' } });
  // });
};

/**
 * 开始拖拽节点到画布
 * 根据节点类型创建不同样式的节点配置
 * @param {Object} data 拖拽数据
 * @param {Object} data.nodeConfig 节点配置信息
 * @param {Event} data.event 拖拽事件
 */
const startDrag = (data) => {
  if (!data || !data.nodeConfig) return;
  
  const { nodeConfig, event } = data;
  
  // 基础节点配置
  let nodeSettings = {
    width: 100,
    height: 40,
    label: nodeConfig.name,
      attrs: {
        body: {
          fill: "#fff",
          stroke: "#1890ff",
          strokeWidth: 1,
        },
        label: {
          text: nodeConfig.name,
          fill: "#333",
          fontSize: 12,
          textAnchor: 'middle',
          textVerticalAnchor: 'middle',
        },
      },
  };
  
  // 根据节点类型设置不同的配置
  if (nodeConfig.type === 'start') {
    // 开始节点配置 - 圆形，绿色主题
    nodeSettings = {
      ...nodeSettings,
      shape: 'circle',
      width: 60,
      height: 60,
      attrs: {
        body: {
          fill: "#e8f7ee",
          stroke: "#67c23a",
          strokeWidth: 2,
        },
        label: {
          text: nodeConfig.name,
          fill: "#333",
          fontSize: 12,
          textAnchor: 'middle',
          textVerticalAnchor: 'middle',
        },
      },
      // 开始节点拥有四个方向的连接点（只能作为源端口）
      ports: {
        groups: {
          top: {
            position: 'top',
            attrs: {
              circle: {
                r: 4,
                magnet: 'source', // 只能作为源端口
                stroke: '#67c23a',
                strokeWidth: 1,
                fill: '#fff',
                style: { visibility: 'visible' },
              },
            },
          },
          right: {
            position: 'right',
            attrs: {
              circle: {
                r: 4,
                magnet: 'source', // 只能作为源端口
                stroke: '#67c23a',
                strokeWidth: 1,
                fill: '#fff',
                style: { visibility: 'visible' },
              },
            },
          },
          bottom: {
            position: 'bottom',
            attrs: {
              circle: {
                r: 4,
                magnet: 'source', // 只能作为源端口
                stroke: '#67c23a',
                strokeWidth: 1,
                fill: '#fff',
                style: { visibility: 'visible' },
              },
            },
          },
          left: {
            position: 'left',
            attrs: {
              circle: {
                r: 4,
                magnet: 'source', // 只能作为源端口
                stroke: '#67c23a',
                strokeWidth: 1,
                fill: '#fff',
                style: { visibility: 'visible' },
              },
            },
          },
        },
        items: [
          { id: 'port-top', group: 'top' },
          { id: 'port-right', group: 'right' },
          { id: 'port-bottom', group: 'bottom' },
          { id: 'port-left', group: 'left' },
        ],
      },
      data: { type: 'start', nodeType: nodeConfig.type },
    };
  } else if (nodeConfig.type === 'end') {
    // 结束节点配置 - 圆形，红色主题
    nodeSettings = {
      ...nodeSettings,
      shape: 'circle',
      width: 60,
      height: 60,
      attrs: {
        body: {
          fill: "#fef0f0",
          stroke: "#f56c6c",
          strokeWidth: 2,
        },
        label: {
          text: nodeConfig.name,
          fill: "#333",
          fontSize: 12,
          textAnchor: 'middle',
          textVerticalAnchor: 'middle',
        },
      },
      // 结束节点拥有四个方向的连接点（只能作为目标端口）
      ports: {
        groups: {
          top: {
            position: 'top',
            attrs: {
              circle: {
                r: 4,
                magnet: 'target', // 只能作为目标端口
                stroke: '#f56c6c',
                strokeWidth: 1,
                fill: '#fff',
                style: { visibility: 'visible' },
              },
            },
          },
          right: {
            position: 'right',
            attrs: {
              circle: {
                r: 4,
                magnet: 'target', // 只能作为目标端口
                stroke: '#f56c6c',
                strokeWidth: 1,
                fill: '#fff',
                style: { visibility: 'visible' },
              },
            },
          },
          bottom: {
            position: 'bottom',
            attrs: {
              circle: {
                r: 4,
                magnet: 'target', // 只能作为目标端口
                stroke: '#f56c6c',
                strokeWidth: 1,
                fill: '#fff',
                style: { visibility: 'visible' },
              },
            },
          },
          left: {
            position: 'left',
            attrs: {
              circle: {
                r: 4,
                magnet: 'target', // 只能作为目标端口
                stroke: '#f56c6c',
                strokeWidth: 1,
                fill: '#fff',
                style: { visibility: 'visible' },
              },
            },
          },
        },
        items: [
          { id: 'port-top', group: 'top' },
          { id: 'port-right', group: 'right' },
          { id: 'port-bottom', group: 'bottom' },
          { id: 'port-left', group: 'left' },
        ],
      },
      data: { type: 'end', nodeType: nodeConfig.type },
    };
  } else if (nodeConfig.type === 'inspection') {
    // 检验工序节点配置 - 菱形，橙色主题
    nodeSettings = {
      ...nodeSettings,
      shape: 'polygon',
      width: 80,
      height: 80,
      attrs: {
        body: {
          fill: "#fef9e7",
          stroke: "#e6a23c",
          strokeWidth: 2,
          refPoints: '0,10 10,0 20,10 10,20', // 菱形的四个点
        },
        label: {
          text: nodeConfig.name,
          fill: "#333",
          fontSize: 12,
          textAnchor: 'middle',
          textVerticalAnchor: 'middle',
        },
      },
      // 检验节点的连接点配置
      ports: {
        groups: {
          top: {
            position: 'top',
            attrs: {
              circle: {
                r: 4,
                magnet: true, // 既可作为源端口也可作为目标端口
                stroke: '#e6a23c',
                strokeWidth: 1,
                fill: '#fff',
                style: { visibility: 'visible' },
              },
            },
          },
          right: {
            position: 'right',
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: '#e6a23c',
                strokeWidth: 1,
                fill: '#fff',
                style: { visibility: 'visible' },
              },
            },
          },
          bottom: {
            position: 'bottom',
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: '#e6a23c',
                strokeWidth: 1,
                fill: '#fff',
                style: { visibility: 'visible' },
              },
            },
          },
          left: {
            position: 'left',
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: '#e6a23c',
                strokeWidth: 1,
                fill: '#fff',
                style: { visibility: 'visible' },
              },
            },
          },
        },
        items: [
          { id: 'port-top', group: 'top' },
          { id: 'port-right', group: 'right' },
          { id: 'port-bottom', group: 'bottom' },
          { id: 'port-left', group: 'left' },
        ],
      },
      data: { type: 'inspection', nodeType: nodeConfig.type },
    };
  } else {
    // 其他节点配置 - 矩形，蓝色主题
    nodeSettings = {
      ...nodeSettings,
      shape: 'rect',
      // 普通节点的连接点配置
      ports: {
        groups: {
          top: {
            position: 'top',
            attrs: {
              circle: {
                r: 4,
                magnet: true, // 既可作为源端口也可作为目标端口
                stroke: '#1890ff',
                strokeWidth: 1,
                fill: '#fff',
                style: { visibility: 'visible' },
              },
            },
          },
          right: {
            position: 'right',
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: '#1890ff',
                strokeWidth: 1,
                fill: '#fff',
                style: { visibility: 'visible' },
              },
            },
          },
          bottom: {
            position: 'bottom',
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: '#1890ff',
                strokeWidth: 1,
                fill: '#fff',
                style: { visibility: 'visible' },
              },
            },
          },
          left: {
            position: 'left',
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: '#1890ff',
                strokeWidth: 1,
                fill: '#fff',
                style: { visibility: 'visible' },
              },
            },
          },
        },
        items: [
          { id: 'port-top', group: 'top' },
          { id: 'port-right', group: 'right' },
          { id: 'port-bottom', group: 'bottom' },
          { id: 'port-left', group: 'left' },
        ],
      },
      data: { type: 'normal', nodeType: nodeConfig.type },
    };
  }
  
  // 创建节点实例
  const node = graph.value.createNode(nodeSettings);
  
  // 创建拖拽实例
  const dnd = new Dnd({
    target: graph.value,
    /**
     * 验证节点是否可以放置到画布
     * @returns {boolean} 是否允许放置
     */
    validateNode: () => {
      console.log("成功拖拽到画布");
      return true;
    }
  });
  
  // 开始拖拽
  dnd.start(node, event);
};

// 注释掉的watch监听器，改为直接调用startDrag
// watch(() => props.currentNode, (newValue) => {
//   startDrag(newValue);
// }, { deep: true });

/**
 * 导出流程图为PNG图片
 * 将当前画布内容导出为图片文件
 */
const exportGraph = () => {
  if (!graph.value) return;
  
  // 导出PNG图片
  graph.value.exportPNG('process-graph',{
   backgroundColor: '#f8f9fa', // 设置导出图片的背景色
   padding:100, // 图片边距
   quality: 1, // 图片质量
  });
};

/**
 * 导出流程为JSON格式
 * 将画布数据序列化为JSON并保存到本地存储
 */
const exportGraphJSON = () => {
  if (!graph.value) return;

  const jsonData = graph.value.toJSON(); // 获取画布数据

  // 存入本地存储
  localStorage.setItem('x6-process-graph', JSON.stringify(jsonData));
  console.log('流程图 JSON 已保存到本地存储',jsonData);
};

/**
 * 从本地存储导入流程
 * 从localStorage读取之前保存的流程数据并恢复到画布
 */
const importGraphJSON = () => {
  const jsonString = localStorage.getItem('x6-process-graph');
  if (jsonString && graph.value) {
    try {
      const jsonData = JSON.parse(jsonString);
      graph.value.fromJSON(jsonData);
      console.log('流程图 JSON 已从本地存储导入');
    } catch (error) {
      console.error('导入流程图失败：', error);
    }
  }
};

/**
 * 自适应画布内容
 * 结合手动计算和X6内置方法，实现画布内容的最佳显示效果
 */
const fitToContent = () => {
  if (!graph.value) return;
  
  // 获取所有节点
  const nodes = graph.value.getNodes();
  if (nodes.length === 0) {
    console.log('画布中没有节点，无法自适应');
    return;
  }
  
  // 结合手动计算和X6内置方法，获得更好的自适应效果
  
  // 第一步：手动计算内容边界和合适的缩放比例
  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
  
  // 遍历所有节点，计算内容边界
  nodes.forEach(node => {
    const bbox = node.getBBox();
    minX = Math.min(minX, bbox.x);
    minY = Math.min(minY, bbox.y);
    maxX = Math.max(maxX, bbox.x + bbox.width);
    maxY = Math.max(maxY, bbox.y + bbox.height);
  });
  
  // 添加边距
  const padding = 80;
  const contentWidth = maxX - minX + padding * 2;
  const contentHeight = maxY - minY + padding * 2;
  
  // 获取画布容器尺寸
  const containerRect = container.value.getBoundingClientRect();
  const containerWidth = containerRect.width;
  const containerHeight = containerRect.height;
  
  // 计算缩放比例（保持宽高比）
  const scaleX = containerWidth / contentWidth;
  const scaleY = containerHeight / contentHeight;
  const scale = Math.min(scaleX, scaleY, 1.5); // 限制最大缩放比例为1.5
  
  // 第二步：设置缩放比例
  graph.value.zoomTo(scale);
  
  // 第三步：延迟调用centerContent方法进行内容居中
  setTimeout(() => {
    graph.value.centerContent({
      padding: padding,
      useCellGeometry: true
    });
  }, 100);
};

// 组件挂载时初始化画布
onMounted(() => {
  initGraph();
});

// 组件卸载时清理资源
onUnmounted(() => {
  if (graph.value) {
    graph.value.dispose();
  }
});

// 暴露给父组件的方法
defineExpose({
  startDrag,
  exportGraph,
  exportGraphJSON,
  importGraphJSON,
  fitToContent,
});
</script>

<style lang="scss" scoped>
.process-canvas {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

  .canvas-container {
    width: 100%;
    height: 100%;
    background-color: #f8f9fa;
  }
}
</style>

<style lang="scss">
// 右键菜单样式（不使用scoped，因为菜单添加到body）
.context-menu {
  background: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 4px 0;
  min-width: 120px;
  font-size: 14px;
  
  .menu-item {
    padding: 8px 16px;
    cursor: pointer;
    color: #606266;
    transition: all 0.2s;
    
    &:hover {
      background-color: #f5f7fa;
      color: #409eff;
    }
    
    &[data-action="delete"]:hover {
      background-color: #fef0f0;
      color: #f56c6c;
    }
    
    span {
      display: flex;
      align-items: center;
      
      &::before {
        content: '🗑️';
        margin-right: 8px;
        font-size: 12px;
      }
    }
  }
}
</style>
